<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据导出</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-purple-600 to-blue-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-profile.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">数据导出</h1>
                <button onclick="viewExportHistory()" class="text-white hover:opacity-80">
                    <i class="fas fa-history text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Export Status Card -->
        <div class="px-4 py-3 bg-gradient-to-r from-purple-600 to-blue-600">
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4">
                <div class="text-white">
                    <p class="text-sm opacity-80 mb-1">本月导出</p>
                    <p class="text-2xl font-bold mb-3">28次</p>
                    <div class="grid grid-cols-3 gap-4">
                        <div class="text-center">
                            <p class="text-xs opacity-80">订单数据</p>
                            <p class="text-lg font-semibold">15</p>
                        </div>
                        <div class="text-center">
                            <p class="text-xs opacity-80">财务数据</p>
                            <p class="text-lg font-semibold">8</p>
                        </div>
                        <div class="text-center">
                            <p class="text-xs opacity-80">商品数据</p>
                            <p class="text-lg font-semibold">5</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Scrollable Content -->
        <div class="h-[calc(852px-220px)] overflow-y-auto pb-20">
            <!-- Export Categories -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-purple-600 mr-2 rounded-full"></span>
                    数据类型
                </h3>
                <div class="space-y-3">
                    <!-- Order Data -->
                    <div class="bg-white rounded-xl border border-gray-200 p-4 hover:bg-gray-50 cursor-pointer" onclick="exportData('orders')">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center">
                                <i class="fas fa-shopping-cart text-2xl text-blue-600 mr-3"></i>
                                <div>
                                    <p class="font-medium">订单数据</p>
                                    <p class="text-xs text-gray-500 mt-1">订单详情、状态、物流信息</p>
                                </div>
                            </div>
                            <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded-full">Excel</span>
                        </div>
                        <div class="text-xs text-gray-600">
                            包含：订单号、商品信息、用户信息、支付状态、物流状态等
                        </div>
                    </div>

                    <!-- Financial Data -->
                    <div class="bg-white rounded-xl border border-gray-200 p-4 hover:bg-gray-50 cursor-pointer" onclick="exportData('finance')">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center">
                                <i class="fas fa-chart-line text-2xl text-green-600 mr-3"></i>
                                <div>
                                    <p class="font-medium">财务数据</p>
                                    <p class="text-xs text-gray-500 mt-1">收入、支出、对账单</p>
                                </div>
                            </div>
                            <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">Excel</span>
                        </div>
                        <div class="text-xs text-gray-600">
                            包含：交易流水、结算记录、手续费、税费等
                        </div>
                    </div>

                    <!-- Product Data -->
                    <div class="bg-white rounded-xl border border-gray-200 p-4 hover:bg-gray-50 cursor-pointer" onclick="exportData('products')">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center">
                                <i class="fas fa-box text-2xl text-orange-600 mr-3"></i>
                                <div>
                                    <p class="font-medium">商品数据</p>
                                    <p class="text-xs text-gray-500 mt-1">商品信息、库存、销量</p>
                                </div>
                            </div>
                            <span class="bg-orange-100 text-orange-600 text-xs px-2 py-1 rounded-full">Excel</span>
                        </div>
                        <div class="text-xs text-gray-600">
                            包含：商品详情、价格、库存、销售数据等
                        </div>
                    </div>

                    <!-- Customer Data -->
                    <div class="bg-white rounded-xl border border-gray-200 p-4 hover:bg-gray-50 cursor-pointer" onclick="exportData('customers')">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center">
                                <i class="fas fa-users text-2xl text-purple-600 mr-3"></i>
                                <div>
                                    <p class="font-medium">客户数据</p>
                                    <p class="text-xs text-gray-500 mt-1">用户信息、消费记录</p>
                                </div>
                            </div>
                            <span class="bg-purple-100 text-purple-600 text-xs px-2 py-1 rounded-full">Excel</span>
                        </div>
                        <div class="text-xs text-gray-600">
                            包含：客户基本信息、购买历史、偏好分析等
                        </div>
                    </div>

                    <!-- Analytics Data -->
                    <div class="bg-white rounded-xl border border-gray-200 p-4 hover:bg-gray-50 cursor-pointer" onclick="exportData('analytics')">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center">
                                <i class="fas fa-chart-bar text-2xl text-indigo-600 mr-3"></i>
                                <div>
                                    <p class="font-medium">分析报表</p>
                                    <p class="text-xs text-gray-500 mt-1">销售统计、趋势分析</p>
                                </div>
                            </div>
                            <span class="bg-indigo-100 text-indigo-600 text-xs px-2 py-1 rounded-full">PDF</span>
                        </div>
                        <div class="text-xs text-gray-600">
                            包含：销售趋势、热门商品、客户分析等
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Exports -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center justify-between">
                    <span class="flex items-center">
                        <span class="w-1 h-4 bg-purple-600 mr-2 rounded-full"></span>
                        最近导出
                    </span>
                    <span onclick="viewExportHistory()" class="text-purple-600 text-xs cursor-pointer hover:text-purple-700">
                        查看全部 <i class="fas fa-chevron-right text-xs"></i>
                    </span>
                </h3>
                <div class="space-y-3">
                    <!-- Recent Export 1 -->
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center">
                                <i class="fas fa-file-excel text-green-600 text-lg mr-3"></i>
                                <div>
                                    <p class="text-sm font-medium">订单数据_2025-01</p>
                                    <p class="text-xs text-gray-500 mt-1">2025-01-08 14:32</p>
                                </div>
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">已完成</span>
                                <button onclick="downloadFile('order_2025_01.xlsx')" class="text-blue-600 text-xs hover:text-blue-700">
                                    <i class="fas fa-download"></i>
                                </button>
                            </div>
                        </div>
                        <p class="text-xs text-gray-600">包含1,265条订单记录 • 文件大小: 2.3MB</p>
                    </div>

                    <!-- Recent Export 2 -->
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center">
                                <i class="fas fa-file-pdf text-red-600 text-lg mr-3"></i>
                                <div>
                                    <p class="text-sm font-medium">财务报表_2024-12</p>
                                    <p class="text-xs text-gray-500 mt-1">2025-01-05 10:15</p>
                                </div>
                            </div>
                            <div class="flex items-center space-x-2">
                                <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">已完成</span>
                                <button onclick="downloadFile('finance_2024_12.pdf')" class="text-blue-600 text-xs hover:text-blue-700">
                                    <i class="fas fa-download"></i>
                                </button>
                            </div>
                        </div>
                        <p class="text-xs text-gray-600">12月财务汇总报告 • 文件大小: 1.8MB</p>
                    </div>

                    <!-- Recent Export 3 -->
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center">
                                <i class="fas fa-spinner fa-spin text-blue-600 text-lg mr-3"></i>
                                <div>
                                    <p class="text-sm font-medium">商品库存报表</p>
                                    <p class="text-xs text-gray-500 mt-1">正在导出...</p>
                                </div>
                            </div>
                            <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded-full">处理中</span>
                        </div>
                        <p class="text-xs text-gray-600">预计2-3分钟完成</p>
                    </div>
                </div>
            </div>

            <!-- Export Settings -->
            <div class="p-4 pb-8">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-purple-600 mr-2 rounded-full"></span>
                    导出设置
                </h3>
                <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                    <div class="p-3 border-b border-gray-100">
                        <div class="flex justify-between items-center">
                            <div>
                                <p class="text-sm font-medium">自动定期导出</p>
                                <p class="text-xs text-gray-500 mt-1">每月自动导出数据报表</p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" class="sr-only peer">
                                <div class="w-9 h-5 bg-gray-200 rounded-full peer peer-checked:bg-purple-500 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"></div>
                            </label>
                        </div>
                    </div>
                    <div class="p-3 border-b border-gray-100">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">默认导出格式</span>
                            <div class="flex items-center">
                                <span class="text-sm font-medium mr-2">Excel (.xlsx)</span>
                                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                            </div>
                        </div>
                    </div>
                    <div class="p-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">邮件通知</span>
                            <div class="flex items-center">
                                <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full mr-2">已开启</span>
                                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Action Bar -->
        <div class="absolute bottom-1 left-0 right-0 bg-white border-t border-gray-200 px-4 py-3 shadow-lg">
            <div class="flex space-x-3">
                <button onclick="customExport()" class="flex-1 bg-purple-600 text-white font-medium py-2.5 rounded-lg hover:bg-purple-700 transition-colors">
                    <i class="fas fa-cog mr-2"></i>自定义导出
                </button>
                <button onclick="viewExportHistory()" class="bg-gray-100 text-gray-700 font-medium px-4 py-2.5 rounded-lg hover:bg-gray-200 transition-colors">
                    <i class="fas fa-history"></i>
                </button>
            </div>
        </div>
    </div>

    <script>
        // Export data by type
        function exportData(dataType) {
            const dataNames = {
                'orders': '订单数据',
                'finance': '财务数据',
                'products': '商品数据',
                'customers': '客户数据',
                'analytics': '分析报表'
            };

            const confirmed = confirm(`确定要导出${dataNames[dataType]}吗？\n\n导出可能需要几分钟时间，完成后会通过邮件通知您。`);
            
            if (confirmed) {
                showToast(`正在导出${dataNames[dataType]}...`);
                
                // Simulate export process
                setTimeout(() => {
                    showToast(`${dataNames[dataType]}导出已开始`);
                }, 2000);
            }
        }

        // Custom export
        function customExport() {
            window.location.href = 'b2b-custom-export.html';
        }

        // View export history
        function viewExportHistory() {
            window.location.href = 'b2b-export-history.html';
        }

        // Download file
        function downloadFile(filename) {
            showToast(`正在下载 ${filename}...`);
            setTimeout(() => {
                showToast('文件下载完成');
            }, 1500);
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            showToast('数据导出中心已加载');
        });
    </script>
</body>
</html>